<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>综合练习</title>
    <style>
      ul{
        list-style: none;
      }
      .toutiao-wrapper{
        width: 400px;
        min-height: 400px;
        margin: 50px auto;
      }
      ul li{
        margin-bottom: 10px;
      }
      ul li::after{
        content: '';
        display: block;
        clear: both;
      }

      ul li div{
        float: left;
      }

      ul li .id{
        margin-right: 10px;
        font-weight: bold;
      }

      ul li .title{
        margin-right: 5px;
      }

      ul li .hot{
        background: rgb(240, 65, 66);
        color: white;
        font-size: 12px;
        padding: 1px 3px 2px;
        border-radius: 3px;
      }

      ul li:first-child .id{
        color: #b24646;
      }

      ul li:nth-child(2) .id{
        color: #f25a5b;
      }

      ul li:nth-child(3) .id{
        color: #ff9b06;
      }
    </style>
  </head>
  <body>
    <div id="root">
    </div>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
      // https://www.toutiao.com/
      let data = [
        {
          id: 1,
          title: "河北通勤车坠河瞬间曝光",
          time: "2022-06-27",
          is_hot: true,
          is_new: false,
        },
        {
          id: 2,
          title: "国足公布对阵沙特23人大名单",
          time: "2023-06-22",
          is_hot: true,
          is_new: false,
        },
        {
          id: 3,
          title: "“争控”成中印边境谈判关键词",
          time: "2023-05-22",
          is_hot: true,
          is_new: false,
        },
        {
          id: 4,
          title: "五粮液独董郎定常因突发疾病去世",
          time: "2024-04-22",
          is_hot: false,
          is_new: false,
        },
        {
          id: 5,
          title: "王立科被逮捕：曾想停播人民的名义",
          time: "2025-03-22",
          is_hot: false,
          is_new: true,
        },
        {
          id: 6,
          title: "台风“圆规”路径",
          is_hot: true,
          is_new: false,
          time: "2022-07-22",
        },
        {
          id: 7,
          title: "保姆报复前雇主偷走其最爱煎锅",
          is_hot: true,
          is_new: false,
          time: "2022-08-22",
        },
        {
          id: 8,
          title: "中国南海军事演习引发海外关注",
          is_hot: false,
          is_new: false,
          time: "2022-09-06",
        },
        {
          id: 9,
          title: "河北坠河班车已致14人遇难",
          is_hot: true,
          is_new: false,
          time: "2022-10-25",
        },
      ];
        
      //创建虚拟 DOM 对象
      let vdom = <div className="toutiao-wrapper">
        <ul>
          {
            data.map(item => {
              return <li onClick={() => {
                //弹出当前新闻的时间
                alert(item.time);
              }}>
                <div className="id">{item.id}</div>
                <div className="title">{item.title}</div>
                {item.is_hot && <div className="hot">热</div>}
                </li>;
            })
          }
        </ul>
      </div>;

      //渲染
      ReactDOM.render(vdom, document.querySelector('#root'))
    </script>
  </body>
</html>
